import React, { useState, useEffect } from 'react'
import { Menu } from 'antd';
import { GithubOutlined } from '@ant-design/icons';
import '../style/menu.less'
import {connect} from 'dva';
import {post} from '@/Utils/axios'
import { history } from 'umi';
import {Url} from '@/Utils/services/url'
function menu(props:any) {
    const { SubMenu } = Menu
    interface IMenu {
    title: string;
    parentId: Array<IMenu>;
    path: string;
    id: string;
    }
    const [menuData, setMenuData] = useState<Array<IMenu>>([]) 
    const [active,setActive] = useState(0)
    const handleClick = (e: any) => {
        setActive(e.id)
        history.push({
          pathname:'/index' + e.path
        })
      }
      useEffect(async ()=>{
         await post(Url.firstLevelMenu,{}).then(async res =>{
            await post(Url.secondLevelMenu,{parentId:res[0].menuId}).then(res =>{
                let arr = []
                for(let item in res){
                    let objOfMenu = {
                        id:res[item].menuId,
                        title:res[item].menuName ,
                        parentId: res[item].parentId,
                        path: res[item].menuUrl,
                    }
                    arr.push(objOfMenu)
                }
                setMenuData(arr)
            })
        })
      },[])
      useEffect(()=>{
        if(menuData.length){
          for(let item in menuData){
            if(menuData[item].path == '/createActivity'){
               handleClick(menuData[item])
            }
            
          }
        }
      },[menuData])
  return (
    <div className="Menu" style={{ width: 256 }}>
        <div className='header_top'>
            <GithubOutlined style={{fontSize:'4rem'}}/>
            <span>后台管理系统</span>
        </div>
        <div className='Menu_item' style={{color:'white'}}>
          {menuData.map((el:any) =>{
            return <span key={el.id} onClick={()=>handleClick(el)} className={active == el.id?'active':''}>{el.title}</span>
          })}
        </div>
        {/* <Menu
            theme={'dark'}
            onClick={handleClick}
            style={{ width: '100%', marginTop: '2px' }}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={[]}
            mode="inline"
        >
            { menuData.map((item: any) => renderMenu(item)) }
        </Menu> */}
  </div>
  )
}
export default connect(({token}:any) =>{
    return token
})(menu)